<template>
  <div class="mod-role">
    <el-form
      class="formEl"
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
      label-width="100px"
    >
      <!-- <el-form-item>
                <el-button size="small" @click="getDataList()">查询</el-button>
            </el-form-item> -->
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%"
    >
      <el-table-column
        prop="leagueCode"
        width="100"
        label="联赛编码"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="leagueName"
        width="120"
        label="联赛名称"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="leftTeamLogo" label="参赛队伍信息" align="left">
        <template #default="scope">
          <div
            style="display: inline-flex"
            v-for="item in scope.row.joinTeamInfoList"
            :key="item.id"
          >
            <div style="display: flex; align-items: center">
              {{ item.name }}
            </div>
            <img :src="item.logoUrl" width="63px" height="91px" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="enableFlag"
        width="100"
        label="是否启用"
        align="center"
      >
        <template #default="scope">
          <el-button
            :type="scope.row.enableFlag === 1 ? 'success' : ''"
            size="small"
            >{{ scope.row.enableFlag === 1 ? "是" : "否" }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="historyFlag"
        width="120"
        label="是否历史联赛"
        align="center"
      >
        <template #default="scope">
          <el-button
            :type="scope.row.historyFlag === 'Y' ? 'success' : ''"
            size="small"
            >{{ scope.row.historyFlag === "Y" ? "是" : "否" }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="tenantId"
        width="120"
        label="租户名称"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "@/utils/axios-util";

export default {
  data() {
    return {
      dataForm: {},
      dataList: [],
      dataListLoading: false,
    };
  },
  components: {},
  mounted() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      request(
        "/admin/leagueInfo/getAll",
        {
          tenantId: userInfo.tenantId,
        },
        "GET"
      ).then(
        (res) => {
          if (res.code === 200) {
            this.dataList = res.data;
          } else {
            this.dataList = [];
            this.$message.error(res.msg);
          }
          this.dataListLoading = false;
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
  },
};
</script>
<style type="text/sass" scoped>
.formEl {
  display: flex;
  flex-wrap: wrap;
}

.page {
  float: right;
  margin-top: 10px;
}
</style>
